<template>
  <div class="me-view-comment-item">
    <!--评论者的头像，楼层，以及评论时间-->
    <div class="me-view-comment-author">
      <a class="">
        <img style="width: 40px;height: 40px;border-radius: 50%" class="me-view-picture" :src="imgUrl+comment.user.avatar"></img>
      </a>
      <div class="me-view-info">
        <span class="me-view-nickname">{{comment.user.nickname}}</span>
        <div class="me-view-meta">
          <span>{{index+1}}楼</span>
          <span>&nbsp;{{comment.createTime}}</span>
        </div>
      </div>
    </div>

    <div>
      <!--父评论的部分-->
      <p class="me-view-comment-content">{{comment.content}}</p>
      <div class="me-view-comment-tools">
        <a class="me-view-comment-tool" v-if="comment.children.length>0">
        <i class="el-icon-caret-top"></i> {{comment.children.length}}
        </a>
        <el-link type="success" class="me-view-comment-tool" @click="showComment(comment.id,comment.user)">
          <i class="me-icon-comment"></i>&nbsp; <span ></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评论
        </el-link>
      </div>

      <div class="me-reply-list">
        <div class="me-reply-item" v-for="c in comment.children" :key="c.id">
          <div style="font-size: 16px">
            <span class="me-reply-user">{{c.user.nickname}}:&nbsp;&nbsp;</span>

            <span v-if="c.level == 2" class="me-reply-user">@{{c.toUser.nickname}} </span>

            <span>{{c.content}}</span>
          </div>
          <div class="me-view-meta">
            <span style="padding-right: 10px">{{c.createTime}}</span>
            <el-link type="success" class="me-view-comment-tool" @click="showComment(comment.id, c.user)">
              <i class="me-icon-comment"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;回复
            </el-link>
          </div>

        </div>
<!--        子评论的回复框-->
        <div class="me-view-comment-write" v-show="commentShow">
          <template>
            <el-input
              v-model="reply.content"
              type="input"
              style="width: 90%"
              :placeholder="placeholder"
              class="me-view-comment-text"
              resize="none">
            </el-input>

            <el-button style="margin-left: 8px" @click="publishComment()" type="text">评论</el-button>
        </template>
        </div>

      </div>

    </div>
  </div>
</template>

<script>


  export default {
    name: "CommentItem",
    props:['articleId','comment','index','rootCommentCounts','userId','getComments']
      // articleId: Number,
      // comment: Object,
      // index: Number,
      // rootCommentCounts: Number,

    ,
    data() {
      return {
        placeholder: '你的评论...',
        commentShow: false,
        imgUrl:this.$Myurl.userImageUrl,
        childrenId: '',
        reply: this.getEmptyReply(),
      }
    },
    methods: {
      showComment(childrenId, toUser) {
        console.log('子评论的id'+childrenId)
        this.reply = this.getEmptyReply()
        console.log('文章id',this.reply.articleId)
        console.log('当前用户id',this.reply.userId)
        if (this.childrenId !== childrenId) {
          if (toUser) {
            this.placeholder = `@${toUser.nickname} `
            this.reply.toUserId = toUser.id
            console.log('被回复用户的id'+toUser.id);
          } else {
            this.placeholder = '你的评论...'
          }
          this.commentShow = true
          this.childrenId = childrenId
        } else {
          this.commentShow = false
          this.childrenId = ''
        }
      },
      publishComment() {
        // let that = this
        if(this.userId == -1){
          this.$message.warning('当前还未登录，不能回复~')
          return;
        }
        if (!this.reply.content) {
          return;
        }
        console.log(this.reply)
        let url = 'comment/addComment'
        this.$axios.post(url,this.reply)
            .then(res=>{
              if(res.data.code == 200){
                this.$message.success(res.data.msg);
                this.getComments();
              }

            })

        // publishComment(that.reply,this.$store.state.token).then(data => {
        //   if(data.success){
        //     that.$message({type: 'success', message: '评论成功', showClose: true})
        //     if(!that.comment.childrens){
        //       that.comment.childrens = []
        //     }
        //     that.comment.childrens.unshift(data.data)
        //     that.$emit('commentCountsIncrement')
        //     this.showComment(this.commentShowIndex)
        //   }else{
        //      that.$message({type: 'error', message: data.msg, showClose: true})
        //   }
        // }).catch(error => {
        //   if (error !== 'error') {
        //     that.$message({type: 'error', message: '评论失败', showClose: true})
        //   }
        // })

      },
      getEmptyReply() {
        return {
          userId:this.userId,
          articleId: this.articleId,
          parentId: this.comment.id,
          toUserId: '',
          content: '',
          level:'2',
        }
      }
    }
  }
</script>

<style>
  .me-view-tag-item {
    margin: 0 4px;
  }

  .me-view-comment {
    margin-top: 60px;
  }

  .me-view-comment-title {
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
  }

  .me-view-comment-write {
    margin-top: 20px;
  }

  .me-view-comment-text {
    font-size: 16px;
  }

  .v-show-content {
    padding: 8px 25px 15px 30px !important;
  }

  .v-note-wrapper .v-note-panel {
    box-shadow: none !important;
  }

  .me-view-comment-item {
    margin-top: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
  }

  .me-view-comment-author {
    margin: 10px 0;
    vertical-align: middle;
  }

  .me-view-nickname {
    font-size: 14px;
  }

  .me-view-comment-content {
    padding-left: 100px;
    line-height: 1.5;
  }

  .me-view-comment-tools {
    margin-top: 4px;
    margin-bottom: 10px;
  }

  .me-view-comment-tool {
    font-size: 13px;
    color: #a6a6a6;
    padding-right: 14px;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    background: #fff !important;
  }

  .me-reply-list {
    padding-left: 16px;
    border-left: 4px solid #c5cac3;
  }

  .me-reply-item {
    margin-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }

  .me-reply-user {
    color: #78b6f7;
  }



  .me-view-body {
    margin: 100px auto 140px;
  }

  .me-view-container {
    width: 800px;
  }

  .el-main {
    overflow: hidden;
  }

  .me-view-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.3;
  }

  .me-view-author {
    /*margin: 30px 0;*/
    margin-top: 30px;
    vertical-align: middle;
  }

  .me-view-picture {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    vertical-align: middle;
    background-color: #5fb878;
  }

  .me-view-info {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
  }

  .me-view-meta {
    font-size: 12px;
    color: #969696;
  }

  .me-view-end {
    margin-top: 20px;
  }

  .me-view-tag {
    margin-top: 20px;
    padding-left: 6px;
    border-left: 4px solid #c5cac3;
  }

  .me-view-tag-item {
    margin: 0 4px;
  }

  .me-view-comment {
    margin-top: 60px;
  }

  .me-view-comment-title {
    font-weight: 600;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20px;
  }

  .me-view-comment-write {
    margin-top: 20px;
  }

  .me-view-comment-text {
    font-size: 16px;
  }

  .v-show-content {
    padding: 8px 25px 15px 30px !important;
  }

  .v-note-wrapper .v-note-panel {
    box-shadow: none !important;
  }

  .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
    background: #fff !important;
  }
</style>
